<template>
    <div class="content">
        <div class="search">
            <el-input v-model="input" placeholder="请输入人员姓名"></el-input>
            <el-button type="primary">搜索</el-button>
        </div>
        <div class="btns" v-if="false">
            <el-button-group>
                <el-button type="primary" size="small">新增</el-button>
                <el-button type="primary" size="small">修改</el-button>
            </el-button-group>
        </div>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55" v-if="false">
            </el-table-column>
            <el-table-column
                label="所属机关">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                prop="laiyuan"
                label="姓名 ">
            </el-table-column>
            <el-table-column
                prop="leibie"
                label="执法证号 "
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="zhuti"
                label="执法类型 "
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="leixing"
                label="执法区域 "
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="dangshiren"
                label="所属部门"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="lianxifangshi"
                label=" 职务"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="shifoulian"
                label="人员性质"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="yxq"
                label="证件有效期"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="sxq"
                label="证件失效期"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="fzjg"
                label="发证机关"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="zhuangtai"
                label="审核状态"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                v-if="false"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: center; padding: 10px 0;">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="1000">
            </el-pagination>
        </div>

        <el-dialog title="分配人员" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="form">
                <el-select v-model="person" placeholder="请选择分配人员" style="width: 100%">
                    <el-option label="张三" value="shanghai"></el-option>
                    <el-option label="李四" value="beijing"></el-option>
                    <el-option label="王五" value="wangwu"></el-option>
                </el-select>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'zfztwh',
    data () {
        return {
            dialogFormVisible: false,
            person: '',
            tableData: [{
                id: '忻府区城市管理局',
                laiyuan: '周成',
                leibie: '',
                zhuti: '',
                leixing: '',
                dangshiren: '',
                lianxifangshi: '科员',
                shifoulian: '公务员',
                yxq: '',
                sxq: '',
                fzjg: '',
                zhuangtai: '已备案'
            }, {
                id: '忻府区城市建设管理局',
                laiyuan: '张勇',
                leibie: '',
                zhuti: '',
                leixing: '',
                dangshiren: '',
                lianxifangshi: '科员',
                shifoulian: '公务员',
                yxq: '',
                sxq: '',
                fzjg: '',
                zhuangtai: '已备案'
            }, {
                id: '忻府区生态环境局',
                laiyuan: '高立鹏',
                leibie: '',
                zhuti: '',
                leixing: '',
                dangshiren: '',
                lianxifangshi: '科员',
                shifoulian: '公务员',
                yxq: '',
                sxq: '',
                fzjg: '',
                zhuangtai: '已备案'
            }, {
                id: '忻府区公安局',
                laiyuan: '王晓丽',
                leibie: '',
                zhuti: '',
                leixing: '',
                dangshiren: '',
                lianxifangshi: '科员',
                shifoulian: '公务员',
                yxq: '',
                sxq: '',
                fzjg: '',
                zhuangtai: '已备案'
            }, {
                id: '忻府区生态环境局',
                laiyuan: '王志强',
                leibie: '',
                zhuti: '',
                leixing: '',
                dangshiren: '',
                lianxifangshi: '科员',
                shifoulian: '公务员',
                yxq: '',
                sxq: '',
                fzjg: '',
                zhuangtai: '已备案'
            }, {
                id: '忻州市文化旅游局',
                laiyuan: '张建立',
                leibie: '',
                zhuti: '',
                leixing: '',
                dangshiren: '',
                lianxifangshi: '科员',
                shifoulian: '公务员',
                yxq: '',
                sxq: '',
                fzjg: '',
                zhuangtai: '已备案'
            }, {
                id: '忻府区水利局',
                laiyuan: '李芳芳',
                leibie: '',
                zhuti: '',
                leixing: '',
                dangshiren: '',
                lianxifangshi: '科员',
                shifoulian: '公务员',
                yxq: '',
                sxq: '',
                fzjg: '',
                zhuangtai: '已备案'
            }, {
                id: '忻府区水利局',
                laiyuan: '郝小明',
                leibie: '',
                zhuti: '',
                leixing: '',
                dangshiren: '',
                lianxifangshi: '科长',
                shifoulian: '公务员',
                yxq: '',
                sxq: '',
                fzjg: '',
                zhuangtai: '已备案'
            }, {
                id: '忻州市生态环境局',
                laiyuan: '武耀斌',
                leibie: '',
                zhuti: '生态环境保护执法',
                leixing: '忻府区',
                dangshiren: '监察科',
                lianxifangshi: '科长',
                shifoulian: '公务员',
                yxq: '',
                sxq: '',
                fzjg: '',
                zhuangtai: '已审核'
            }, {
                id: '忻州市生态环境局',
                laiyuan: '王勇',
                leibie: '',
                zhuti: '生态环境保护执法',
                leixing: '忻府区',
                dangshiren: '局机关',
                lianxifangshi: '局领导',
                shifoulian: '公务员',
                yxq: '',
                sxq: '',
                fzjg: '',
                zhuangtai: '已审核'
            }],
            multipleSelection: [],
            options: [{
                value: '1',
                label: '简易案件'
            }, {
                value: '2',
                label: '一般案件'
            }, {
                value: '3',
                label: '重大案件'
            }, {
                value: '4',
                label: '刑事案件'
            }],
            value: '',
            formLabelWidth: '120px'
        }
    },
    methods: {
        openFP: function () {
            this.dialogFormVisible = true
        },
        add: function () {
            this.$router.push('/auditAdd')
        },
        edit: function () {
            this.add()
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    margin: 15px 15px 80px 15px; background: #FFFFFF; border-radius: 5px; box-shadow: 0 10px 20px rgba(0,0,0,0.06); padding: 20px 30px;
}
.search {
    display: flex; justify-content: flex-start;
    .el-input {
        width: auto; margin-right: 20px;
    }
    .el-select {
        margin-right: 20px;
    }
}
.btns {
    margin: 15px 0;
}
</style>
